<template>
  <div class="app-container">
    <h2>产品效益</h2>
    <el-form class="basic-form" ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="产品效益" prop="benefits">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.benefits" />
      </el-form-item>

      <el-form-item>
        <el-button v-waves type="primary" @click="handleSubmit(form)">提交</el-button>
      <el-button v-waves @click="handleReset()">重置</el-button>
  </el-form-item>
</el-form>
  </div>
  </template>
<script>
import * as homeHttp from '@/api/home';
import { EventBus } from '@/utils/event-bus';
import waves from '@/directive/waves';
import SingleImageUpload from '@/components/Upload/SingleImage';

export default {
  name: 'feature',
  components: { SingleImageUpload },
  directives: { waves },
  data() {
    return {
      form: {},
      rules: {
        benefits: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      data: [],
      loading: false,
      dialogVisible: false
    };
  },
  created() {
    let { id } = this.$route.params;

    if (id) {
      this.id = id;
      this.getData();
    } else {
      this.id = id = -1
    }

    const levelList = [
      // { title: '产品列表', path: '/product' },
      // { title: '服务详情', path: id ? '/product/edit/' + id : '/product/create' },
      { title: '数字影像服务', path: id ? `/product/medical/${id}` : '/product/medical' },
      { title: '解决问题', path: id ? `/product/feature/${id}` : '/product/feature' },
      { title: '产品效益', path: id ? `/product/advantage/${id}` : '/product/advantage', redirect: 'noRedirect' },
      { title: '应用场景', path: id ? `/product/product/${id}` : '/product/product' }
    ];
    EventBus.$emit('custom-breadcrumb', levelList);
  },

  methods: {
    async getData() {
      this.loading = true;
      const res = await homeHttp.getSolutionById({ id: this.id });

      this.data = res.data.Data && res.data.Data.advantage || [];
      this.loading = false;
    },
    async handleDelete(id) {
      const res = await homeHttp.deleteNewsById({ id });

      this.$message.success('删除成功');
      this.getList();
    },

    handleCommand(command, row) {
      switch (command) {
        case 'delete':
          this.$confirm('确定要删除这条数据吗？', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.handleDelete();
          });
          break;

        case 'edit':
          this.dialogForm = row;
          this.dialogVisible = true;
          break;

        case 'create':
          this.$router.push(`/solutions/feature/edit`);
          break;
      }
    },

    handleClose() {
      this.dialogVisible = false;
      this.$refs['dialogForm'].resetFields();
    },

    handleSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          const res = await homeHttp.updateSolution({ ...this.form, id: this.id });

          if (!res.data.Data) throw new Error('提交失败');

          this.handleClose();
        } catch(e) {
          console.log('solution/feature/medical: ', e);
          this.$message.error('提交失败');
        }
      });
    }
  }
}
</script>
